<html>
    <head>
      <title>Bullet/WebGL Demo</title>
      <script type="text/javascript" src="glge_math.js"></script>
      <script type="text/javascript" src="glge.js"></script>
      <script type="text/javascript" src="bullet.js"></script>
      <script ty[e="text/javascript" src="bullet_demo.js"></script>
      <style type="text/css">
        body { background-color: #eee; }
      </style>
    </head>
    <body>
      <center>
        <form onsubmit="run([]); prepareBulletDemo(); return false">
          <input type="submit" value="restart">
        </form>

        <canvas id="canvas" width="500" height="500"></canvas>
        <script type="text/javascript">
          var doc = new GLGE.Document();

          doc.onLoad = function() {
            prepareBulletDemo();

            var boxes = [];

            function simulatePhysics(diff) {
              simulateBulletDemo(diff);
              for (var i = 0; i < 5; i++)
                applyBulletObject(boxes[i], readBulletObject(i+1));
            }

            var renderer = new GLGE.Renderer(document.getElementById("canvas"));
            var scene = doc.getElement("mainscene");
            renderer.setScene(scene);

            var mesh = doc.getElement("Box");
            for (var i = 0; i < 5; i++) {
              var box = new GLGE.Object('box_' + i);
              box.setMesh(mesh);
              box.setMaterial(doc.getElement("boxmaterial"+(i+1)));
              box.setId('box_' + i);
              box.setLoc(i*2, 10, 0);
              box.setScale(1, 1, 1);
              scene.addChild(box);
              boxes.push(box);
            }

            var t = Date.now();
            var lastHUD = 0;
            var diffs = 0, num = 0;
            function render() {
              var now = Date.now();
              var diff = (now - t)/1000;

              // Simulate
              simulatePhysics(diff);

              // Render
              renderer.render();

              // Show FPS
              diffs += diff;
              num++;
              if (now - lastHUD > 250) {
                document.getElementById('out').innerHTML = '<b>FPS:' + Math.ceil(1/(diffs/num)) + '</b>';
                lastHUD = now;
                diffs = 0;
                num = 0;
              }
              t = now;
            }

            setInterval(render, 1000/100);
          }

          doc.load("http://127.0.0.1:8991/scene.xml");
        </script>
        <br><br>
        <div id="out">waka</div>
        <br>
        <b>Bullet/WebGL Demo</b>: The <a href="http://www.bulletphysics.com">Bullet physics engine</a>, compiled from C++ to JavaScript using <a href="http://emscripten.org">Emscripten</a>, with rendering by <a href="http://glge.org">GLGE</a> using WebGL.
        <br><br>
        Tested with Firefox 4 nightly builds (minefield) and Chrome 7 (requires --enable-webgl on the commandline); should work with any
        <a href="http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">browser that supports WebGL</a>
      </center>
    </body>
</html>

